<template>
  <div id="container" style="height: 600px"></div>
</template>

<script lang="ts" setup>
// 引入高德地图
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onBeforeUnmount } from "vue";

let map: any;
onMounted(() => {
  AMapLoader.load({
    key: "458fb0e35714be9cb3cadb5218ff5920", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // 创建地图实例
      map = new AMap.Map("container", {
        zoom: 15, //级别
        center: [120.26408, 30.305451], //中心点坐标
        // viewMode: "3D", //使用3D视图
        mapStyle: "amap://styles/darkblue", //设置地图的显示样式
      });

      //实时路况图层
      // const trafficLayer = new AMap.TileLayer.Satellite({
      //   zIndex: 10,
      // });
      // map.add(trafficLayer); //添加图层到地图

      const marker = new AMap.Marker({
        position: [120.26408, 30.305451], //位置
        title: "千锋",
        icon: "//vdata.amap.com/icons/b18/1/2.png",
        offset: new AMap.Pixel(-10, -10),
      });
      map.add(marker); //添加到地图

      // 折线
      const lineArr = [
        [120.26408, 30.305451],
        [120.264236, 30.305759],
        [120.266333, 30.306065],
        [120.266403, 30.307825],
        [120.263222, 30.307927],
      ];
      const polyline = new AMap.Polyline({
        path: lineArr, //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
      });
      map.add(polyline);

      const lineArr2 = [
        [120.26408, 30.305451],
        [119.013097, 29.594386],
      ];
      const polyline2 = new AMap.Polyline({
        path: lineArr2, //设置线覆盖物路径
        strokeColor: "#ab1010", //线颜色
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
      });
      map.add(polyline2);

      // 事件
      map.on("click", (event: any) => {
        const { lng, lat } = event.lnglat;
        const marker = new AMap.Marker({
          position: [lng, lat], //位置
        });
        map.add(marker); //添加到地图
      });
      marker.on("click", () => {
        console.log("marker click");
      });

      AMap.plugin("AMap.ToolBar", function () {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
      AMap.plugin("AMap.Scale", function () {
        //异步加载插件
        var scale = new AMap.Scale();
        map.addControl(scale);
      });

      var circle = new AMap.Circle({
        center: new AMap.LngLat("120.26408", "30.305451"), // 圆心位置
        radius: 10000, //半径米
        strokeColor: "#F33", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 3, //线粗细度
        fillColor: "#ee2200", //填充颜色
        fillOpacity: 0.35, //填充透明度
      });
      map.add(circle);

      // 地图加载完成的生命周期
      map.on("complete", function () {
        // 地图图块加载完成后触发
        console.log("地图加载完成了");
        map.setFitView();
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onBeforeUnmount(() => {
  // 销毁地图的生命周期
  map.destroy();
});
</script>
